// theme.ts

type Mode = "light" | "dark";
type Theme = "red" | "orange" | "yellow" | "cyan" | "green" | "blue" | "purple";

interface ModeVariables {
  bgColor: string;
  bgColor2: string;
  infoColor: string;
}

interface ThemeColors {
  primary: string;
  info: string;
}

const modes: Record<Mode, ModeVariables> = {
  light: {
    bgColor: "#ffffff",
    infoColor: "#000000",
    bgColor2: "#f5f5f5",
  },
  dark: {
    bgColor: "#000000",
    infoColor: "#ffffff",
    bgColor2: "#141414",
  },
};

const colors: Record<Theme, ThemeColors> = {
  red: {
    primary: "#F5222D",
    info: "#F5222D",
  },
  orange: {
    primary: "#FA541C",
    info: "#FA541C",
  },
  yellow: {
    primary: "#FAAD14",
    info: "#FAAD14",
  },
  cyan: {
    primary: "#13C2C2",
    info: "#13C2C2",
  },
  green: {
    primary: "#52C41A",
    info: "#52C41A",
  },
  blue: {
    primary: "#2F54EB",
    info: "#2F54EB",
  },
  purple: {
    primary: "#722ED1",
    info: "#722ED1",
  },
};

import { ref } from "vue";

const curMode = ref<Mode>("light");
const curTheme = ref<Theme>("blue");

export function getModeVar(key: "bgColor" | "infoColor" | "bgColor2"): string {
  console.log(`modes[curMode][key] = ${modes[curMode.value][key]}`);
  return modes[curMode.value][key];
}

export function getColor(key: "primary" | "info"): string {
  console.log(`colors[curTheme][key] = ${colors[curTheme.value][key]}`);
  return colors[curTheme.value][key];
}

export function setMode(mode: Mode): void {
  curMode.value = mode;
  console.log(`curMode(明暗颜色设置) = ${curMode.value}`);
  if (mode === "light") {
    document.documentElement.classList.remove("dark");
    document.documentElement.style.setProperty(
      "--bg-color",
      modes.light.bgColor
    );
    document.documentElement.style.setProperty(
      "--info-color",
      modes.light.infoColor
    );
    document.documentElement.style.setProperty(
      "--bg-color-2",
      modes.light.bgColor2
    );
    document.documentElement.style.setProperty(
      "--bg-primary-color",
      getColor("primary")
    );
    document.documentElement.style.setProperty(
      "--bg-info-color",
      getColor("info")
    );
    document.documentElement.classList.add("light");
  } else {
    document.documentElement.classList.add("dark");
    document.documentElement.style.setProperty(
      "--bg-color",
      modes.dark.bgColor
    );
    document.documentElement.style.setProperty(
      "--info-color",
      modes.dark.infoColor
    );
    document.documentElement.style.setProperty(
      "--bg-color-2",
      modes.dark.bgColor2
    );
    document.documentElement.style.setProperty(
      "--bg-primary-color",
      getColor("primary")
    );
    document.documentElement.style.setProperty(
      "--bg-info-color",
      getColor("info")
    );
    document.documentElement.classList.remove("light");
  }
}

export function setTheme(theme: Theme): void {
  curTheme.value = theme;
  document.documentElement.style.setProperty(
    "--bg-primary-color",
    getColor("primary")
  );
  document.documentElement.style.setProperty(
    "--bg-info-color",
    getColor("info")
  );
  console.log(`curTheme(主题颜色设置) = ${curTheme.value}`);
}
